import { defineComponent, ref, computed } from 'vue'

export default defineComponent({
  name: 'EnhancedComponent',

  setup() {
    // 响应式数据
    const message = ref('Hello from JSX!')
    const inputValue = ref('')
    const showMessage = ref(true)
    const items = ref(['Item 1', 'Item 2', 'Item 3'])

    // 计算属性
    const computedMessage = computed(() => {
      return `${message.value} (computed)`
    })

    // 方法
    const updateMessage = () => {
      message.value = 'Message updated!'
    }

    const toggleMessage = () => {
      showMessage.value = !showMessage.value
    }

    // JSX 渲染函数
    return () => (
      <div>
        {/* 条件渲染 */}
        {showMessage.value ? (
          <div>
            <h1>{message.value}</h1>
            <p>{computedMessage.value}</p>
          </div>
        ) : (
          <p>The message is hidden.</p>
        )}

        {/* 列表渲染 */}
        <ul>
          {items.value.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>

        <button onClick={updateMessage}>Update Message</button>
        <button onClick={toggleMessage}>{showMessage.value ? '成功' : '失败'}</button>
        <input v-model={inputValue.value} placeholder="Type something" />
        <p>Input Value: {inputValue.value}</p>
      </div>
    )
  }
})
